<template>
	<view>
		<view class="setting_box box-shadow">
			<view class="item">
				<text>头像</text>
				<image src="../../static/myImage/user.png" mode="" class="img_box" @click="photoChange"></image>
			</view>
			<navigator url="../settingDetail/settingDetail?title=修改昵称" hover-class="none">
				<view class="item">
					<text>昵称</text>
					<view class="right">
						<text>{{userInfo.name}}</text>
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
			</navigator>
			<navigator url="../settingDetail/settingDetail?title=修改手机号码" hover-class="none">
				<view class="item">
					<text>手机号码</text>
					<view class="right">
						<text>{{userInfo.phone}}</text>
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
			</navigator>
			<navigator url="../settingDetail/settingDetail?title=实名认证" hover-class="none">
				<view class="item">
					<text>实名认证</text>
					<view class="right">
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
			</navigator>
			<navigator url="../settingDetail/settingDetail?title=修改密码" hover-class="none">
				<view class="item">
					<text>修改登录密码</text>
					<view class="right">
						<text>******</text>
						<u-icon name="arrow-right" size="24"></u-icon>
					</view>
				</view>
			</navigator>
		</view>
		<button type="default" class="btn" @click="exitLogin">退出登录</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				photo: '../../myImage/user.png',
				name: '白云山',
				phone: '13322334455'
			}
		};
	},
	methods: {
		photoChange() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					console.log(JSON.stringify(res.tempFilePaths));
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							user: 'test'
						},
						success: uploadFileRes => {
							console.log(uploadFileRes.data);
						}
					});
				}
			});
		},
		exitLogin() {
			uni.reLaunch({
				url: ''
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.setting_box {
	padding: 30upx;
	border-radius: 10upx;
	margin-bottom: 120upx;
	.item {
		padding: 30upx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2upx solid #eeeeee;
		font-size: 30upx;
		&:last-child {
			border: none;
		}
		.img_box {
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
		}
		.right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: $color-999;
			text {
				&:first-child {
					margin-right: 12upx;
				}
			}
		}
	}
}
.btn {
	height: 60upx;
	border-radius: 8upx;
	font-size: 32upx;
	line-height: 60upx;
	color: #ffffff;
	background: #373846;
	border: none;
	&::after {
		border: none;
	}
}
</style>

<style>
page {
	padding: 30upx;
}
</style>
